<template>
  <div>
    <el-dialog name="el-dialog" v-if="dialogType == 'dialog'" :close-on-click-modal="false" :title="title"
    :close-on-press-escape="false"   :visible.sync="visibleInChild"  :width="width" append-to-body :destroy-on-close="dsclose" :before-close="close">
      <el-scrollbar :style="cstyle">
        <div style="padding: 14px;">
          <slot name="content"></slot>
        </div>
      </el-scrollbar>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <slot name="footer"></slot>
      </div>
    </el-dialog>
    <el-drawer v-if="dialogType == 'drawer'" :visible.sync="visibleInChild" :title="title" :size="width" append-to-body
      destroy-on-close :before-close="close" :with-header="true">
      <el-scrollbar :style="'height:' + screenHeight">
        <div style="padding: 14px;">
          <slot name="content"></slot>
        </div>
      </el-scrollbar>
      <div class="dialog-footer" style="text-align: center">
        <slot name="footer"></slot>
      </div>
    </el-drawer>
  </div>
</template>

<script>

export default {
  name: "ComDialog",
  props: {
    title: {
      type: String,
      default: ""
    },
    dsclose: {
      type: Boolean,
      default: true
    },
    dialogType: {
      type: String,
      default: 'dialog'
    },
    cstyle: {
      type: String,
      default: "height:400px"
    },
    width: {
      type: String,
      default: '600px'
    },
    visible: {
      type: Boolean,
      default: false
    },
    height: {
      type: String,
      default: '400px'
    },
    footer: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dtitle: "",
      dwidth: '600px',
      dheight: '400px',
      screenHeight: document.documentElement.clientHeight - 120 + "px;"
    }
  },
  computed: {
    visibleInChild: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    },
  },
  watch: {
    open: {
      handler(val) {
        this.dopen = val;
      },
      immediate: true,
    },
    title(nv, ov) {
      this.dtitle = nv;
    },
    width(nv, ov) {
      this.dwidth = nv;
    },
    height(nv, ov) {
      this.dheight = nv;
    }
  },

  methods: {
    close() {
      this.visibleInChild = false;
    },
    submitForm() {
      this.$el.emit('ok');
    },
    cancel() {
      this.$el.emit('cancle');
    }
  }
}


</script>


<style lang="less" scoped>
::v-deep .el-scrollbar__wrap {
  overflow-x: hidden !important;
}

::v-deep .el-dialog__body {
  padding: 1px 5px;
}

::v-deep .el-dialog {
  background: #181818;

  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }

  .el-dialog__title {
    color: #fff;
  }
}

</style>
